<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品档案查询页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js" ></script>
    <script>


        $(function() {

            //I,II,III级编号联动
            var iNum1;
            var iNum2;
            var aProvince = ["电子", "机械", "商品"];
            var aCity =[["计算机", "手机", "平板", "手表"],
                ["焊接器", "液压器"],
                ["学习用品", "生活用品"]];
            var aCountry =[[
                ["cpu", "gpu","内存条","固态硬盘","网卡"],
                ["处理器","显示器"],
                ["触摸屏","接口"],
                ["表芯","表带"],
            ],
                [
                    ["燃烧带", "焊锡", "焊接头"],
                    ["起重器", "铁块"]
                ],
                [
                    ["钢笔"],
                    ["枕头", "被子", "毛巾", "牙膏"]
                ]];


            for(var i=0;i<aProvince.length;i++){
                $('#SfirstKindName').append('<option>'+aProvince[i]+'</option>');
            };
            $('#SfirstKindName').change(function () {
                $('#SsecondKindName').children().not(':eq(0)').remove();
                $('#SthirdKindName').children().not(':eq(0)').remove();
                iNum1 = $(this).children('option:selected').index();
                var aaCity = aCity[iNum1-1];
                for(var j=0;j<aaCity.length;j++){
                    $('#SsecondKindName').append('<option>'+aaCity[j]+'</option>');
                }
            });
            $('#SsecondKindName').change(function () {
                $('#SthirdKindName').children().not(':eq(0)').remove();
                iNum2 = $(this).children('option:selected').index();
                var aaCountry = aCountry[iNum1-1][iNum2-1];
                for(var k=0;k<aaCountry.length;k++){
                    $('#SthirdKindName').append('<option>'+aaCountry[k]+'</option>');
                }
            })

            for(var i=0;i<aProvince.length;i++){
                $('#firstKindName').append('<option>'+aProvince[i]+'</option>');
            };
            $('#firstKindName').change(function () {
                $('#secondKindName').children().not(':eq(0)').remove();
                $('#thirdKindName').children().not(':eq(0)').remove();
                iNum1 = $(this).children('option:selected').index();
                var aaCity = aCity[iNum1-1];
                for(var j=0;j<aaCity.length;j++){
                    $('#secondKindName').append('<option>'+aaCity[j]+'</option>');
                }
            });
            $('#secondKindName').change(function () {
                $('#thirdKindName').children().not(':eq(0)').remove();
                iNum2 = $(this).children('option:selected').index();
                var aaCountry = aCountry[iNum1-1][iNum2-1];
                for(var k=0;k<aaCountry.length;k++){
                    $('#thirdKindName').append('<option>'+aaCountry[k]+'</option>');
                }
            })



            //页面加载完初始化表格数据

            $('#table').bootstrapTable({
                //请求方式  get请求中文会乱码，建议使用post请求
                method: 'get',
                //请求头部的设置
                contentType: 'application/json;charset=utf-8',
                //路径
                url: '/queryProfileEnquiries.action',
                //设置交替行样式
                striped: true,
                //初始显示页号
                pageNumber: 1,
                //设置表格高度
                height: 700,
                //是否显示分页
                pagination: true,
                //设置是服务端分页还是客户端分页
                sidePagination: 'server',
                //页大小
                pageSize: 5,
                //分页列表
                pageList: [3, 5, 6, 10],
                //上传到服务端的参数
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNum: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,

                        productId:$('#SproductId').val(),
                        productName:$('#SproductName').val(),
                        firstKindName:$('#SfirstKindName').val(),
                        secondKindName:$('#SsecondKindName').val(),
                        thirdKindName:$('#SthirdKindName').val(),
                        checkTag:$('#checkTag').val()
                    };
                },
                // 定义列名
                columns: [
                    {title: '产品编号', field: 'productId', align: 'center'},
                    {title: '产品名称', field: 'productName', align: 'center'},
                    {title: '制造商', field: 'factoryName', align: 'center'},
                    {title: 'I级分类', field: 'firstKindName', align: 'center'},
                    {title: 'II级分类', field: 'secondKindName', align: 'center'},
                    {title: 'III级分类', field: 'thirdKindName', align: 'center'},
                    {title: '用途类型', field: 'type', align: 'center',
                        formatter:function (value) {
                            if(value=='Y001-1'){
                                return '商品';
                            }
                            if(value=='Y001-2'){
                                return '物料';
                            }
                        }
                    },
                    {title: '档次级别', field: 'productClass',align: 'center',
                        formatter:function (value) {
                            if(value=='D001-1'){
                                return '高档';
                            }
                            if(value=='D001-2'){
                                return '中档';
                            }
                            if(value=='D001-3'){
                                return '低档';
                            }
                        }},
                    {title: '计量单位', field: 'personalUnit',align: 'center'},
                    {title: '计量值', field: 'personalValue',align: 'center'},
                    {title: '保修期', field: 'warranty',align: 'center'},
                    {title: '审核状态', field: 'checkTag',align: 'center',
                        formatter:function (value) {
                            if(value=='S001-0'){
                                var btn="<button type='button' class='btn btn-warning')'>等待审核</button>";
                                return btn;
                            }
                            if(value=='S001-1'){
                                var btn="<button type='button' class='btn btn-success')'>审核通过</button>";
                                return btn;
                            }
                            if(value=='S001-2'){
                                var btn="<button type='button' class='btn btn-danger')'>审核不通过</button>";
                                return btn;
                            }
                        }
                    },
                    {
                        title: '操作', field: 'id', align: 'center',
                        formatter: function (value, row, index) {
                            var btn = "<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal' onclick='queryProductProfile(" + JSON.stringify(row) + ")'>查看</button>";
                            return btn;
                        }
                    },
                ]

            });


            //点击查询按钮后刷新表,并清空搜索条件
            $('#searchProduct').click(function () {
                $("#table").bootstrapTable("refresh");
                $('#SproductId').val('');
                $('#SproductName').val('');
                $('#SfirstKindName').val('');
                $('#SsecondKindName').val('');
                $('#SthirdKindName').val('');
            });

            //点击变更按钮后将当前产品信息展示到模态框上
            queryProductProfile = function (a) {

                $('#id').val(a.id),
                    $('#productId').val(a.productId),
                    $('#productName').val(a.productName);
                $('#factoryName').val(a.factoryName);
                $('#firstKindName').val(a.firstKindName);
                $('#secondKindName option').text(a.secondKindName);
                $('#thirdKindName option').text(a.thirdKindName);
                $('#productNick').val(a.productNick);
                $('#type').val(a.type);
                $('#productClass').val(a.productClass);
                $('#personalUnit').val(a.personalUnit);
                $('#personalValue').val(a.personalValue);
                $('#listPrice').val(a.listPrice);
                $('#costPrice').val(a.costPrice);
                $('#warranty').val(a.warranty);
                $('#twinName').val(a.twinName);
                $('#twinId').val(a.twinId);
                $('#lifecycle').val(a.lifecycle);
                $('#amountUnit').val(a.amountUnit);
                $('#responsiblePerson').val(a.responsiblePerson);
                $('#providerGroup').val(a.providerGroup);
                $('#productDescribe').val(a.productDescribe);
                $('#register').val(a.register);
                $('#registerTime').text(a.registerTime);
                $('#checker').val(a.checker);
                $('#checkTime').val(a.checkTime);
                $('#changeTime').val(a.changeTime);
                $('#fileChangeAmount').val(a.fileChangeAmount);
            }







        });



    </script>
</head>
<body>

<!-- 产品档案变更模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">产品档案查询</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col" style="background-color: #1a66e8"><p style="color: white;">主信息</p></div>
                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span style="color: red">*</span>
                            <span>产品名称</span>
                            <input type="text" class="form-control" id="productName" style="width: 280px">
                            <span id="title_exist" style="display: none;color: red">产品名称已存在</span>
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>制造商</span>
                            <input type="text" class="form-control" id="factoryName" style="width: 280px">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee">
                            <span style="color: red">*</span>
                            <span>I级分类&nbsp;</span>
                            <select id="firstKindName" style="width: 240px;height: 32px;">
                                <option value="">----请选择----</option>
                            </select>
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee">
                            <span style="color: red">*</span>
                            <span>II级分类</span>
                            <select id="secondKindName" style="width: 240px">
                                <option value="">----请选择----</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span style="color: red">*</span><span>III级分类</span>
                            <select id="thirdKindName" style="width: 240px">
                                <option value="">----请选择----</option>
                            </select>
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>产品简称</span>
                            <input type="text" class="form-control" id="productNick" style="width: 280px">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee">
                            <span>用途类型</span>
                            <select id="type" style="width: 240px">
                                <option value="">请选择</option>
                                <option value="Y001-1">商品</option>
                                <option value="Y001-2">物料</option>
                            </select>
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee">
                            <span>档次级别</span>
                            <select id="productClass" style="width: 240px">
                                <option value="">请选择</option>
                                <option value="D001-3">低档</option>
                                <option value="D001-2">中档</option>
                                <option value="D001-1">高档</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>计量单位</span>
                            <input type="text" class="form-control" id="personalUnit" style="width: 280px">
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>计量值</span>
                            <input type="text" class="form-control" id="personalValue" style="width: 280px">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span style="color: red">*</span>
                            <span>市场单价(元)</span>
                            <input type="text" class="form-control" id="listPrice" style="width: 280px">
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span style="color: red">*</span>
                            <span>计划成本单价</span>
                            <input type="text" class="form-control" id="costPrice" style="width: 280px">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col" style="background-color: #1a66e8">
                            <p style="color: white">辅助信息</p>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>保修期</span>
                            <input type="text" class="form-control" id="warranty" style="width: 280px">
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>替代品名称</span>
                            <input type="text" class="form-control" id="twinName" style="width: 280px">
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>替代品编号</span>
                            <input type="text" class="form-control" id="twinId" style="width: 280px">
                        </div>

                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>生命周期(年)</span>
                            <input type="text" class="form-control" id="lifecycle" style="width: 280px">
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>单位</span>
                            <input type="text" class="form-control" id="amountUnit" style="width: 280px">
                        </div>


                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>产品经理</span>
                            <input type="text" class="form-control" id="responsiblePerson" style="width: 280px">
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>供应商集合</span>
                            <input type="text" class="form-control" id="providerGroup" style="width: 380px;height: 80px">
                        </div>


                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>产品描述</span>
                            <input type="text" class="form-control" id="productDescribe" style="width: 380px;height: 80px">
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>登记人</span>
                            <input type="text" class="form-control" id="register" readonly="readonly" style="width: 280px">
                        </div>



                        <div class="col-6" style="background-color: #3fc3ee;display: flex;align-items: center">
                            <span>建档时间</span>
                            <span id="registerTime" style="background-color: white;width: 200px;"readonly="readonly"></span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<div class="form-inline breadcrumb" style="width: 90%;background-color: white;">
    <label class="mb-2 mr-sm-2">产品编号</label><input type="text" class="form-control" style="width: 180px" id="SproductId">
    <label class="mb-2 mr-sm-2">产品名称</label><input type="text" class="form-control" id="SproductName" style="width: 180px">
    <label class="mb-2 mr-sm-2">I级分类</label>
    <select class="form-control mb-2 mr-sm-2" id="SfirstKindName">
        <option value="">--请选择--</option>
    </select>

    <label class="mb-2 mr-sm-2">II级分类</label>
    <select class="form-control mb-2 mr-sm-2" id="SsecondKindName">
        <option value="">--请选择--</option>
    </select>

    <label class="mb-2 mr-sm-2">III级分类</label>
    <select class="form-control mb-2 mr-sm-2" id="SthirdKindName">
        <option value="">--请选择--</option>
    </select>

    <button class='btn btn-success' id="searchProduct">搜索</button>
</div>
<table id="table"></table>

<input type="text" id="checkTag" style="display: none">
</body>

</html>